<ui:composition xmlns="http://www.w3.org/1999/xhtml"
	xmlns:ui="http://java.sun.com/jsf/facelets"
	xmlns:h="http://java.sun.com/jsf/html"
	xmlns:f="http://java.sun.com/jsf/core"
	xmlns:p="http://primefaces.org/ui"
	template="../templates/ui.xhtml">

	<ui:define name="content">
		<h1 class="title ui-widget-header ui-corner-all">Calendar - Basic</h1>
		<div class="entry">
			<p>Calendar supports two types of display modes; "inline" or "popup".</p>
			
			<h:form>
			
				<h3>Inline</h3>
				<p:calendar value="#{calendarBean.date1}" mode="inline" />	
				
				<h3>Popup</h3>
				<p:calendar value="#{calendarBean.date2}" />
				
				<h3>Popup Button</h3>
				<p:calendar value="#{calendarBean.date3}" showOn="button" />

                <br />
				
                <p:commandButton value="Submit" update="display" oncomplete="dialog.show()" style="margin-top:10px"/>
				
				<p:dialog header="Selected Dates" widgetVar="dialog" 
							showEffect="fold" hideEffect="fold"
							height="150">
				
                	<h:panelGrid id="display" columns="2" cellpadding="5">
                	
						<h:outputText value="Inline Date: " />
						<h:outputText value="#{calendarBean.date1}">
							<f:convertDateTime pattern="MM/dd/yyyy" timeZone="#{calendarBean.timeZone}"/>
						</h:outputText>
						
						<h:outputText value="Popup Date: " />
						<h:outputText value="#{calendarBean.date2}">
							<f:convertDateTime pattern="MM/dd/yyyy" timeZone="#{calendarBean.timeZone}"/>
						</h:outputText>
						
						<h:outputText value="Popup Button: " />
						<h:outputText value="#{calendarBean.date3}">
							<f:convertDateTime pattern="MM/dd/yyyy" timeZone="#{calendarBean.timeZone}"/>
						</h:outputText>
						
					</h:panelGrid>
                </p:dialog>
				
			</h:form>
	
			<h3>Source</h3>
			<p:tabView>
				<p:tab title="calendarBasic.xhtml">
					<pre name="code" class="xml">
&lt;h:form&gt;
			
	&lt;h3&gt;Inline&lt;/h3&gt;
	&lt;p:calendar value="\#{calendarBean.date1}" mode="inline"/&gt;	
	
	&lt;h3&gt;Popup&lt;/h3&gt;
	&lt;p:calendar value="\#{calendarBean.date2}" /&gt;
	
	&lt;h3&gt;Popup Button&lt;/h3&gt;
	&lt;p:calendar value="\#{calendarBean.date3}" showOn="button" /&gt;

    &lt;p:commandButton value="Submit" update="display" oncomplete="dialog.show()" /&gt;
	
	&lt;p:dialog header="Selected Dates" widgetVar="dialog" 
			showEffect="fold" hideEffect="fold"
			height="150"&gt;
	
		&lt;h:panelGrid id="display" columns="2" cellpadding="5"&gt;
		
			&lt;h:outputText value="Inline Date:" /&gt;
			&lt;h:outputText value="\#{calendarBean.date1}"&gt;
				&lt;f:convertDateTime pattern="MM/dd/yyyy"/&gt;
			&lt;/h:outputText&gt;
			
			&lt;h:outputText value="Popup Date:" /&gt;
			&lt;h:outputText value="\#{calendarBean.date2}"&gt;
				&lt;f:convertDateTime pattern="MM/dd/yyyy"/&gt;
			&lt;/h:outputText&gt;
			
			&lt;h:outputText value="Popup Button Date: " /&gt;
			&lt;h:outputText value="\#{calendarBean.date3}"&gt;
				&lt;f:convertDateTime pattern="MM/dd/yyyy"/&gt;
			&lt;/h:outputText&gt;
			
		&lt;/h:panelGrid&gt;
		
	&lt;/p:dialog&gt;
	
&lt;/h:form&gt;
					</pre>
				</p:tab>
				
				<p:tab title="CalendarBean.java">
					<pre name="code" class="java">
package org.primefaces.examples.view;

import java.util.Date;

import org.primefaces.event.DateSelectEvent;

public class CalendarBean {

	private Date date1;
	
	private Date date2;
	
	private Date date3;
	
	public Date getDate1() {
		return date1;
	}

	public void setDate1(Date date1) {
		this.date1 = date1;
	}

	public Date getDate2() {
		return date2;
	}

	public void setDate2(Date date2) {
		this.date2 = date2;
	}
	
	public Date getDate3() {
		return date3;
	}

	public void setDate3(Date date3) {
		this.date3 = date3;
	}
}
					</pre>
				</p:tab>
			</p:tabView>
			
         </div>
        
	</ui:define>
</ui:composition>
